<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航菜单</title>
		<style type="text/css">
			body{position: relative;
				width: 850px;
			}
			#num1{position: relative;
				height: 30px;width: 850px;
				background-color: #EEEEF0;
			}
			#ul1{
				list-style: none;
				position: absolute;
				top: -17px;left:100px;
				font-size: 14px;
				color:#6C6C6C;
				
			}
			#ul1 li{float: left;margin: 10px;}
			#lable{
				position: absolute;
				right: 35px;top: 10px;
			}
			#num2{
				height: 200px;width: 220px;
				border: 1px solid lightgray;
				position: absolute;
				right: 35px;top: 22px;
				
			}
			#num2 ul{list-style: none;margin: 0;padding: 0;color:#6C6C6C;}
			#num2 ul li{margin: 10px 20px 20px 20px;
			             }
		</style>
	</head>
	<body>
		<div id="num1">
			<img src="img/logo.gif" />
			<ul id="ul1">
				<li>购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                <li>优惠券&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                <li>快速注卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                <li>各地购课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                <li> 手机报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</li>
                <li>网站导航</li>
			</ul>
			
			<img id="lable" src="img/open_icon.gif" />
		</div>
        <div id="num2">
        	<ul>
        		<li>托福 雅思 考研 职称英语 初中 日语<hr /></li> 
        		
        		<li>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校<hr /></li>
        		
        		<li>M-Zone 手机报 时时英语</li>
        		
        	</ul>
        	
        	
        	
        </div>
		
	</body>
</html>
